<template>
    <div id="classify">

        <van-search placeholder="回车搜索数据" />

        <van-row>
            <van-col span="6">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item
                        v-for="(item,index) in nav"
                        :key="index"
                        :title="item.name"
                        :name="item.id"
                        @click="tabAdd(item.id)"
                    />
                </van-sidebar>
            </van-col>

            <van-col span="18">
                <Swipers />

                <div 
                    v-for="(item, index) in subNab" 
                    :key="index" 
                    class="image">
                    <img :src="item.icon" @click='addGotodes(item.id)' />
                    <div>{{ item.name }}</div>
                </div>
            </van-col>
        </van-row>
        
    </div>
</template>

<script>
// 轮播
import Swipers from '../components/classify/Swiper';

export default {
    components:{
        Swipers,
    },
    data() {
        return {
            activeKey: 0,
            nav:[],  // 左侧导航数据
            subNab:[],  // 右侧商品列表数据
            listNav:[],
        }
    },
    mounted() {
        this.$API.classifyshop().then((res)=>{
            console.log(res);
            this.listNav = res.data.data;

            this.nav.push({
                name: "所有分类",
                pid: 0,
                id: 10086
            });

            this.listNav.forEach(element => {
                if(element.pid == 0){
                    this.nav.push(element);
                }else{
                    this.subNab.push(element);
                }
            });
        }).catch((error)=>{
            console.log(error);
        });
    },
    methods: {
        // 点击 左侧切换
        tabAdd(id){
            console.log(id);   
            this.subNab = [];
            this.listNav.forEach(item => {
                if(item.pid == id){
                    this.subNab.push(item);
                }
                if(id == 10086){
                    this.subNab.push(item);
                }
            });
        },
        // 点击 跳转 进入右侧：分类详情
        addGotodes(id){
            console.log(id)
            this.$router.push({
                path:'/Classlist',
                query:{
                    id,
                }
            });
        }
    },
}
</script>

<style lang="scss">
#classify{
    width: 100%;
    height: 100%;
    font-size: 0.2rem;
    text-align: center;
    .van-search{
        border-bottom: 0.01rem solid lightgray;
    }
    .van-row{
        width: 100%;
        height: 11.3rem;
        .van-col{
            height: 100%;
            overflow-Y: scroll;
            border-right: 0.01rem solid lightgray;
            .van-sidebar-item:hover{
                color:red;
            }
        }
    }
    .image{
        width:1.63rem;
        height: 2.2rem;
        float: left;
        margin-right:0.2rem;
        img{
            width:100%;
            height:74%;
        }
    }
}
</style>